﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../Styles/LayoutStyleSheet.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/BoozePortThems.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/JScript.min.js" type="text/javascript"></script>
    <script src="../Scripts/JScriptOverlay-1.8.1-2.js" type="text/javascript"></script>
    <script type="text/javascript" src="../Scripts/Popup.js"></script>
    <style type="text/css">

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  background: #990000;
  background:rgba(225,0,0,0.5);
  border: 0px solid Gray;
  border-radius: 50px/80px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 150px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 40%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  max-height: 50%;
  min-height: 30%;
  overflow: auto;
  
}
    </style>
    <script type="text/javascript">
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                    .attr('src', e.target.result)

                };

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
</head>
<body style="background: rgba(0,0,0,.1)">
    <div id="header">
        <div id="Logo" style="float: left; margin: 8px 0 0 75px;outline:none">
                <a href="../Index.htm" style="outline:none">
                    <img src="../Images/BoozeLogo.jpg" /></a>
            </div>
        <div id="NavMenu" style="float: right">
            <ul id="menu">
                <li><a href="../Index.htm#Home">Home</a></li>
                <li><a href="../Index.htm#Feature">Feature</a></li>
                <li><a href="../Index.htm#About">About</a></li>
                <li><a href="../Index.htm#Team">Team</a></li>
                <li><a href="../Index.htm#Testimonial">Testimonial</a></li>
                <li><a href="../Index.htm#ContactUs">Contact Us</a></li>
                <li><a href="../Index.htm#Adds">Adds</a></li>
            </ul>
        </div>
    </div>
    <div id="Clear" style="clear: inherit">
    </div>
    <div style="margin: 30px 120px 0px 120px;">
        <div id="DivHeading">
            <h1 style="color: #aec946">
                Create a campaign</h1>
            <hr />
        </div>
        <div id="DivAdvertisement" style="float: left">
            <div id="DivCampaignSelection" style="margin: 10px 120px 0px 130px;">
                <table>
                </table>
            </div>
            <div id="DivCampaign">
                <table cellpadding="10" cellspacing="5">
                    <tr>
                        <td valign="top">
                            Select your campaign
                        </td>
                        <td>
                            <input type="radio" name="group1" value="Product" class="RadioButton" checked="checked" />
                            Product &nbsp;&nbsp;&nbsp
                            <input type="radio" name="group1" value="Institution" class="RadioButton" />
                            Institution
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            Campaign Name
                        </td>
                        <td>
                            <input type="text" id="txtCampaignName" style="width:350px"  />
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            Select an image
                        </td>
                        <td>
                            <input type='file' onchange="readURL(this);" style="width: 364px; outline: none;
                                border: 1px solid white; background-color: transparent;" />
                            <!--<img id="blah" src="#" alt="your image" />-->
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            Advertisement link
                        </td>
                        <td>
                            <input type="text" id="txtLink" style="width:350px" />
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            Description
                        </td>
                        <td>
                        <textarea name="txtDes" cols="20" rows="5" ... ></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            Location
                        </td>
                        <td>
                            <select style="width: 365px; height: 40px">
                                <option value="" disabled="disabled" selected="selected">Select your city...</option>
                                <option value="1">Mumbai</option>
                                <option value="2">Delhi</option>
                                <option value="3">Bangalore</option>
                                <option value="4">Kolkata</option>
                                <option value="5">Chennai</option>
                                <option value="6">hyderabad</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            Age Range
                        </td>
                        <td>
                            <select style="width: 83px; height: 35px">
                                <option value="" disabled="disabled" selected="selected">18</option>
                                <option value="1">18</option>
                                <option value="2">19</option>
                                <option value="3">20</option>
                                <option value="4">21</option>
                                <option value="5">22</option>
                                <option value="6">23</option>
                            </select>
                            &nbsp&nbsp - &nbsp&nbsp
                            <select style="width: 83px; height: 35px">
                                <option value="" disabled="disabled" selected="selected">65+</option>
                                <option value="1">18</option>
                                <option value="2">19</option>
                                <option value="3">20</option>
                                <option value="4">21</option>
                                <option value="5">22</option>
                                <option value="6">23</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            Gender
                        </td>
                        <td>
                            <input type="radio" name="group2" value="All" class="RadioButton" checked="checked" />All
                            &nbsp;&nbsp;
                            <input type="radio" name="group2" value="Men" class="RadioButton" />Men &nbsp;&nbsp;
                            <input type="radio" name="group2" value="Women" class="RadioButton" />Women
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <div style="float: left">
                                <!--<input id="btnPreview" type="button" value="Preview" onclick="popup1"  style="width: 150px;background:rgba(225,0,0,0.5) " />-->
                            <a class="button" href="#popup1" style="text-decoration: none;">Preview campaign</a>
                            </div>
                            <div style="float: right; margin-right: 15px; margin-top: -10px">
                                <input id="btnSave" class="button" type="button" value="Create campaign" style="width: 150px; " /></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="DivDisplayImage" style="float: left; margin: 90px 0px 0px 40px; max-width: 450;
            min-width: 150px; max-height: 300px; min-height: 150px; border: none">
           
        </div>
        

<div id="popup1" class="overlay">
	<div class="popup">
		<h3 style="text-align: center">Your campaign preview</h3>
		<a class="close" href="#">×</a>
        <br />
        <div class="content">
			<table>
            <tr>
            <td>
            <div style="float: left"><a href="#">http://wwww.Dasideen.com</a></div>
            <div style="float: left; margin-left: 250px; font-weight: bolder">16 Aug 2015</div>
            
            </td>
           
            </tr>
            <tr>
             
            <td>
            <img id="blah" src="../Images/ImageIcon.png" style="max-width: 450; min-width: 150px;
                max-height: 300px; min-height: 150px; text-align: center"/></td>
            </tr>
            <tr>
            <td> Guinness has announced that its European customers will soon be able to enjoy two
                 new heritage-inspired beers later this month. The two new brews are said to be made
                 from recipes.</td>
            </tr>
            </table>
		</div>
	</div>
</div>
    </div>
</body>
</html>
